<template>
	<div class="flex flex-col justify-start items-center mb-10 px-3 pt-[10px]">
		<template v-for="item in rewardsList" :key="item.id">
			<template v-if="item.id === 'expireBonus' && item.isShow">
				<div
					class="w-full my-1 mx-6 h-[72px] rounded-lg flex flex-col items-center justify-center py-4 cursor-pointer"
					:class="item.bgColor"
					@click="onClickCardItem(item)">
					<p class="flex justify-center items-center gap-[2px] text-t-4">{{ item.name }}</p>
					<div class="flex flex-col justify-center items-center">
						<base-image
							src="activity/vip-benefits/deposit-bonus.svg"
							class="w-[30px]"
							v-if="item.amountIcon" />
						<p
							class="text-center text-2xl app-font-heavy font-black text-t-2 flex justify-center items-center gap-[2px]"
							:class="{ 'max-amount': item.amountIcon }">
							<base-currency
								:currency="appStore.currency"
								:class="{ 'text-[#FF0032]': item.amountIcon }" />
							{{
								fmtAmount(activityStore.status.expireBonus.value, {
									hideCurrenySymbol: true
								})
							}}
						</p>
						<template v-if="item?.type === 'lockBonus'">
							<rewards-countdown
								:time="item?.timer - Date.now()"
								@finish="activityStore.getProgressiveData()"
								class="mb-1 mt-[2px]" />
						</template>
					</div>
				</div>
			</template>
			<template v-else>
				<reward-card-item
					:is-vertical="false"
					class="!w-full my-[3px]"
					v-if="item.isShow"
					:item="item"
					:button="item.button"
					:title="item.name"
					:icon="item.icon"
					:amount="item.amount"
					:btnState="item.btnState"
					:amountIcon="item.amountIcon"
					:bg-color="item.bgColor"
					:btn-text="item.btnText"
					:help-link="item.tncLink"
					@click="onClickCardItem(item)">
					<template v-if="item.id === 'lockBonus'" #action-text>
						<i18n-t :keypath="activityStore.lockBonusButton().text" scope="global">
							<template #amount>
								<up-amount :value="activityStore.status.lockBonus.notReceivedAmount" />
							</template>
						</i18n-t>
					</template>

					<template v-else-if="item.id === 'reload'" #action-text>
						{{ $t(activityStore.depositButton().text) }}
						<rewards-countdown
							v-if="Number(item?.timer - Date.now()) > 0"
							class="bg-transparent !min-w-[66px] !text-sm !pl-[2px]"
							:showIcon="false"
							:time="item?.timer - Date.now()"
							@finish="activityStore.getProgressiveData()" />
					</template>
				</reward-card-item>
			</template>
		</template>
	</div>

	<activity-rewards-popup
		:title="activityStore.rewardPopupData?.title"
		:type="activityStore.rewardPopupData?.type"
		:icon="activityStore.rewardPopupData?.popupIcon"
		:bgColor="activityStore.rewardPopupData?.bgColorPopup" />

	<detail-list-popup
		v-if="activityStore.showRewardDetailPopup"
		v-model="activityStore.showRewardDetailPopup"
		:type="activityStore.rewardPopupData?.type"
		:title="activityStore.rewardPopupData?.title"
		@close="activityStore.setDetailCardType('')" />
</template>

<script setup lang="ts">
import RewardCardItem from '@/views/activity/components/reward-card-item/index.vue'
import { BaseCurrency, BaseImage } from '@/components/base'
import { UpAmount } from '@/components/up'
import { fmtAmount } from '@/utils'
import { useActivityStore, useAppStore } from '@/store'
import RewardsCountdown from '@/views/activity/components/rewards-countdown/index.vue'
import DetailListPopup from '@/views/activity/components/rewards/detail-list-popup.vue'
import ActivityRewardsPopup from '@/views/activity/components/rewards/index.vue'
import { onClickCardItem, useRewardsList } from '@/views/activity/use-rewards-list.ts'

const appStore = useAppStore()
const activityStore = useActivityStore()
const rewardsList = useRewardsList()
</script>

<style scoped></style>
